<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link href="./static/bootstrap/css/bootstrap.css" type="text/css" rel="stylesheet" />
    <script type="text/javascript" src="./static/js/jquery-3.3.1.min.js"></script>
    <script type="text/javascript" src="./static/bootstrap/js/bootstrap.js"></script>
    <title>HRMS 酒店管理系统</title>
</head>
<body class="container">
<!--顶部-->
<nav class="navbar navbar-default" role="navigation" style="border: none;">
    <div class="container-fluid">
        <div class="navbar-header">
            <a class="navbar-brand" href="#">HRMS 酒店客房管理系统</a>
        </div>
    </div>
</nav>

<!--主体部分-->
<div id="login">

    <div style="width: 65%; margin-top: 70px">
        <img src="./static/img/IMG_7114.JPG" style="width: 100%; height: 100%;">
    </div>

    <div id="in" style="display: none; position: absolute; top: 180px; right: 200px;width:420px;height:380px;border:2px solid #ddd; border-radius: 10px">
        <div style="position: absolute; top: 0; right: 50px;">
            <div class="page-header">
                <h2>登录</h2>
            </div>
            <form class="form-horizontal" role="form" style="margin-right: 15px">
                <div class="form-group form-group-lg">
                    <div style="width: 320px; margin-left: 15px">
                        <input id="user" class="form-control input" type="text" v-model="user.username" placeholder="用户名">
                    </div>
                    <div style="width: 320px; position: relative;top: 27px; margin-left: 15px">
                        <input id="psd" class="form-control input" type="password" v-model="user.password" placeholder="密码">
                    </div>
                    <div class="checkbox"  style="position: relative;top: 30px; left: 20px;">

                        <span id="msg" style="color: red">{{loginMsg}}</span>

                    </div>
                    <button id="submit" type="button" @click="login" class="btn btn-primary btn-lg btn-block"  style="width: 320px; position: relative;top: 55px; left: 15px">登&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;录</button>
                </div>
            </form>
        </div>
    </div>

</div>

<script src="./static/js/vue.js"></script>
<script>

    let login = new Vue({
        el: "#login",
        data: {
            user: {
                username: "",
                password: ""
            },
            loginMsg: null
        },
        methods: {
            login: function () {
                //loading效果
                $("#msg").css({color: "#444"});
                login.loginMsg = "正在加载，请稍等...";
                if($.trim(login.user.username+"") === "" || $.trim(login.user.password+"") === ""){
                    $("#msg").css({color: "red"});
                    login.loginMsg = "用户名或密码不能为空"
                }else {
                    $.ajax({
                        url: "/user/login",
                        type: "POST",
                        contentType: "application/json",
                        dataType: "json",
                        data: JSON.stringify(login.user),
                        success: function (data) {
                            if (data.code === "OK") {
                                window.location.href = "/index.html";
                                console.log("OK");
                            } else {
                                $("#msg").css({color: "red"});
                                login.loginMsg = data.msg;
                            }
                        }
                    })
                }
            }
        }
    });

    //绑定Enter事件
    $(window).keyup(function (key) {
        if(key.keyCode === 13) {
            //登录
            login.login();
        }
    });

    $("#in").fadeIn(3000);


</script>

</body>
</html>
